<template>
  <el-dialog
    :model-value="dialogVisible"
    title="视频截图"
    :before-close="handleCloseDialog"
  >
<!--    <div id="playerVideoDiv" align="center">
      <video id="videoPlayer" ref="videoRef" class="video-js vjs-16-9" style=""></video>
    </div>-->
    <video-player
       ref="videoPlayerRef"
      :player-mimetype="row.mimetype ? row.mimetype : 'video/mp4'"
      :player-src="row.playurl ? row.playurl : ''"
    />
    <el-row class="mt15">
      <el-col :span="24">
        <div style="text-align:center;" class="mb10">
          <el-button type="warning" @click="handlePauseVideo" :disabled="screenShotSrc.length >= 10">
            <el-icon>
              <camera />
            </el-icon>
            抽帧截图
          </el-button>
          <div style="font-size:12px;margin-top:5px;color:#999;"> PS:最多 10 张</div>
        </div>
        <!--<el-button type="primary" size="mini" v-else @click="handlePlayVideo">
          <el-icon>
            <video-play />
          </el-icon>
          继续播放
        </el-button>-->
      </el-col>
      <el-col :span="24" class="mt10">
        <ul class="imglist">
          <li v-for="(item, index) in screenShotSrc" :key="item.currentTime" >
            <el-image
                    fit="scale-down"
                    :src="item.viewurl + '&width=135'"
                    :preview-src-list="imgViewSrc"
                    :initial-index="index"
                    style="width:100%;height:135px"
            />
            <a class="delete-image" href="javascript:;" @click.stop="handleDeleteImg(item.currentTime)">
              <el-icon><circle-close/></el-icon>
            </a>
            <span class="imgtime">{{currentTime(item.currentTime)}}</span>
            <a class="edit-image" href="javascript:;" v-if="isSelected(item.currentTime)" @click="handleCancelSelectImg(item.currentTime)">
              取消
            </a>
            <a class="edit-image" href="javascript:;" v-else @click="handleSelectImg(item.currentTime)">
              选择
            </a>
          </li>
          <li class="noborder"></li>
          <li class="noborder"></li>
          <li class="noborder"></li>
        </ul>
      </el-col>
    </el-row>
    <template #footer>
      <div align="center" v-if="screenShotSrc.length > 0">
        <el-button type="default" size="mini" @click="handleCloseDialog">取消</el-button>
        <el-button type="primary" size="mini" @click="handleConfirmSelected">确定选择</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
  import { ref, nextTick, computed } from 'vue'
  import { useStore } from 'vuex'
  import { formatSeconToTime} from "@/utils/usage-config";
  import VideoPlayer from "../player/VideoPlayer";
  import { ElMessage } from 'element-plus'
  import { selectedImages } from "@/api/media/image";

  export default {
    name: "ScreenShotDialog",
    components: { VideoPlayer },
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      row: {
        type: Object,
        required: true
      },
      isMulti: {
        type: Boolean,
        default: true
      }
    },
    emits: ['handleCloseDialog', 'resultcallback'],
    setup(props, { emit }) {
      const store = useStore()
      const isplaying = ref(true)
      const screenShotSrc = ref([])
      const imgViewSrc = ref([])
      const selectedImg = ref([])
      const videoPlayerRef = ref(null)

      const isSelected = computed(() => {
        return (ct) => {
          const index = selectedImg.value.findIndex((d) => d.currentTime == ct)
          return index != -1
        }
      })

      const currentTime = computed(() => {
        return (ct) => {
          return formatSeconToTime(parseInt(ct))
        }
      })

      const handleCloseDialog = () => {
        nextTick(() => {
          videoPlayerRef.value.handleDisposePlayer()
        })
        emit('handleCloseDialog')
      }

      const init = () => {
        nextTick(() => {
          screenShotSrc.value = []
          selectedImg.value = []
          videoPlayerRef.value.init()
        })
      }
      const handlePauseVideo = () => {
        isplaying.value = false
        let ct = parseInt(videoPlayerRef.value.videoRef.currentTime)
        let viewurl = process.env.VUE_APP_BASE_CLOUDSERVICE_API_URL + '/vodpic?fid=' + props.row.sourceid + '&corpid=' + store.getters.corpinfo.corpid + '&timeoff=' + ct
        screenShotSrc.value.push({currentTime: videoPlayerRef.value.videoRef.currentTime, viewurl: viewurl})
        imgViewSrc.value.push(viewurl)
      }
      const handlePlayVideo = () => {
        isplaying.value = true
        videoPlayerRef.value.player.play()
      }
      const getOindex = (ct) => {
        return screenShotSrc.value.findIndex(d => d.currentTime == ct)
      }
      const handleDeleteImg = (ct) => {
        screenShotSrc.value.splice(getOindex(ct), 1)
        const sd = selectedImg.value.findIndex(d => d.currentTime == ct)
        if (sd != -1) {
          selectedImg.value.splice(sd, 1)
        }
      }

      const handleSelectImg = (ct) => {
        if (props.isMulti) {
          // 可以多选
          selectedImg.value.push(screenShotSrc.value[getOindex(ct)])
        } else {
          selectedImg.value = [screenShotSrc.value[getOindex(ct)]]
        }
      }
      const handleConfirmSelected = () => {
        let formData = []
        if (selectedImg.value.length === 0) {
          ElMessage({type: 'warning', message: '请先选择图片', duration: 2000})
        } else {
          selectedImg.value.forEach(data => {
            let endIndex = props.row.name.indexOf('.')
            let name = ''
            if (endIndex === -1) {
              name = props.row.name
            } else {
              name = props.row.name.substring(0, endIndex) + parseInt(data.currentTime)
            }
            formData.push({
              name: name,
              url: data.viewurl,
              isself: 0
            })
          })
          selectedImages({datas: formData}).then(response => {
            if (response.errcode === 0) {
              emit('resultcallback', response.data)
              handleCloseDialog()
            }
          })
        }
      }
      const handleCancelSelectImg = (ct) => {
        selectedImg.value.splice(selectedImg.value.findIndex(d => d.currentTime == ct), 1)
      }
      return {
        handleCloseDialog,
        init,
        isplaying,
        handlePlayVideo,
        handlePauseVideo,
        screenShotSrc,
        handleDeleteImg,
        handleSelectImg,
        imgViewSrc,
        handleConfirmSelected,
        videoPlayerRef,
        isSelected,
        handleCancelSelectImg,
        currentTime
      }
    }
  }
</script>

<style scoped>
  #playerVideoDiv {
    margin: 0 auto;
    width: 80%;
  }
</style>
<style scoped lang="scss">
  .imglist{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    li {
      position: relative;
      width: 23%;
      margin-right: 0;
      margin-bottom:10px;
      display: flex;
      justify-content: center;
      align-items: center;
      border:1px solid rgba(153,153,153,0.4);
      .edit-image{
        display: flex;
        position: absolute;
        bottom:0;
        right:0;
        padding: 4px 9px;
        color:#409eff;
        font-size: 12px;
        background-color: transparent;
        line-height: initial;
      };
      .delete-image {
        display: flex;
        position: absolute;
        top:0;
        right:0;
        padding: 3px;
        .el-icon{
          font-size:20px;
        }
      }
      .imgtime{
        position: absolute;
        bottom:0;
        padding: 4px 0;
        padding-left: 4px;
        width:100%;
        color:#fff;
        font-size: 12px;
        background-color: rgba(0,0,0,0.6);
        line-height: initial;
        box-sizing: border-box;
      }
    }
    li.imgplus{
      >div{text-align: center;}
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items: center;
      width: 135px;
      height: 135px;
      overflow: hidden;
      border: 1px dashed rgba(153,153,153,0.4);
      background: rgba(222,222,222,0.2); cursor: pointer;
      .el-icon{font-size: 50px;color:#999;}
    }
    li.noborder{
      border: 0;
    }
    // li:nth-child(6n){margin-right:0;}
  }
</style>
